Dynamic Data চার্টে প্রদর্শিত ডেটা যখন রিয়েল-টাইমে পরিবর্তিত হয়, তখন চার্টটি স্বয়ংক্রিয়ভাবে আপডেট হয়। Angular এবং Google Charts ব্যবহার করে, আপনি ডাইনামিক ডেটা তৈরি এবং প্রদর্শন করতে পারেন। এখানে আমরা দেখব কিভাবে ডাইনামিক ডেটা তৈরি করে তা Google Charts-এ ব্যবহার করা যায়।

Steps for Dynamic Data in Google Charts

1. Angular App তৈরি করা
2. Google Charts লাইব্রেরি ইন্সটল করা
3. ডাইনামিক ডেটা তৈরি করা
4. ডেটা আপডেট করা এবং চার্টে রিফ্লেক্ট করা

Step 1: Angular App তৈরি করা

প্রথমে, একটি Angular অ্যাপ তৈরি করুন (যদি ইতিমধ্যে তৈরি থাকে, তবে সেটি ব্যবহার করতে পারেন):

ng new dynamic-chart-app
cd dynamic-chart-app

Step 2: Google Charts লাইব্রেরি ইন্সটল করা

এখন, Google Charts ইন্টিগ্রেট করতে angular-google-charts লাইব্রেরি ইন্সটল করতে হবে। ইন্সটল করার জন্য নিচের কমান্ডটি ব্যবহার করুন:

npm install angular-google-charts

এটি ইনস্টল হওয়ার পর, angular-google-charts লাইব্রেরি আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 3: GoogleChartsModule ইমপোর্ট করা

এখন, আপনার অ্যাপ্লিকেশনে GoogleChartsModule ব্যবহার করতে, app.module.ts ফাইলে এটি ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: ডাইনামিক ডেটা তৈরি এবং আপডেট করা

এখন, app.component.ts ফাইলে ডাইনামিক ডেটা তৈরি করা হবে এবং সময়ের সাথে সেটি আপডেট করা হবে। আমরা একটি Pie Chart উদাহরণ হিসেবে ব্যবহার করব এবং ডেটা আপডেট করার জন্য একটি ফাংশন তৈরি করব।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Dynamic Google Chart';

  chartType = 'PieChart';  // Chart Type
  chartData = [
    ['Task', 'Hours per Day'],
    ['Work', 8],
    ['Eat', 2],
    ['Commute', 2],
    ['Watch TV', 2],
    ['Sleep', 8]
  ]; // Initial Chart Data

  chartOptions = {
    title: 'My Daily Activities',
    pieHole: 0.4, // Doughnut Style
    width: 600,
    height: 400
  }; // Chart Options

  // Function to update the data dynamically
  updateChartData() {
    this.chartData = [
      ['Task', 'Hours per Day'],
      ['Work', Math.floor(Math.random() * 10)], // Randomizing 'Work' value
      ['Eat', Math.floor(Math.random() * 10)],  // Randomizing 'Eat' value
      ['Commute', Math.floor(Math.random() * 10)], // Randomizing 'Commute' value
      ['Watch TV', Math.floor(Math.random() * 10)], // Randomizing 'Watch TV' value
      ['Sleep', Math.floor(Math.random() * 10)]  // Randomizing 'Sleep' value
    ];
  }
}

এখানে, chartData একটি অ্যারে হিসাবে শুরু করা হয়েছে, এবং updateChartData() ফাংশনটি চারটি মান র‍্যান্ডমভাবে পরিবর্তন করবে, যা Math.random() ফাংশনের মাধ্যমে রিয়েল-টাইমে আপডেট হবে।

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Chart কম্পোনেন্ট -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

<!-- একটি বাটন যা ডেটা আপডেট করবে -->
<button (click)="updateChartData()">Update Chart Data</button>

এখানে একটি বাটন রয়েছে, যা ক্লিক করলে updateChartData() ফাংশন কল হবে এবং ডেটা আপডেট হবে। নতুন ডেটা স্বয়ংক্রিয়ভাবে চার্টে রিফ্লেক্ট হবে।

Step 5: অ্যাপ্লিকেশন চালানো

এখন Angular অ্যাপ্লিকেশনটি চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি আপনার Pie Chart দেখতে পারবেন এবং বাটন ক্লিক করার সাথে সাথে ডাইনামিক ডেটা আপডেট হতে দেখবেন।

Dynamic Data পরিবর্তন এবং Chart Update

Angular-এ Dynamic Data পরিবর্তন করার মাধ্যমে, আপনি Pie Chart, Bar Chart, Line Chart, বা অন্য যে কোনও চার্টে রিয়েল-টাইম ডেটা আপডেট করতে পারবেন। এর মাধ্যমে, আপনি ব্যবহারকারীদের জন্য ইন্টারঅ্যাকটিভ এবং ডাইনামিক ভিজুয়ালাইজেশন তৈরি করতে পারবেন।

সারাংশ

এভাবে, আমরা Google Charts API ব্যবহার করে Angular অ্যাপে Dynamic Data তৈরি এবং আপডেট করেছি। arrayToDataTable ব্যবহার করে ডেটা কাস্টমাইজ এবং পরিবর্তন করা সম্ভব। এক্সাম্পল হিসাবে, আমরা একটি Pie Chart তৈরি করেছি এবং Math.random() ফাংশন ব্যবহার করে ডেটাকে রিয়েল-টাইমে পরিবর্তন করেছি। Angular এর event binding এবং data binding ব্যবহার করে সহজেই ডেটার পরিবর্তন চার্টে প্রতিফলিত করতে সক্ষম হয়েছি।